<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="65%">
    <el-checkbox-group v-model="membershipLevelList">
      <el-checkbox
        :label="item.name"
        :value="item.id"
        v-for="(item, index) in levelOptions"
        :key="index"
      />
    </el-checkbox-group>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import * as LevelApi from '@/api/member/level'
defineOptions({ name: 'MemberLevel' })
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('会员等级') // 弹窗的标题
const membershipLevelList = ref<number[]>([])
const levelOptions = ref<LevelApi.LevelVO[]>([])

const getList = async () => {
  levelOptions.value = await LevelApi.getSimpleLevelList()
}
const open = async (selectList: number[]) => {
  console.log(selectList)
  dialogVisible.value = true
  dialogTitle.value = '会员等级'
  getList()

  resetForm(selectList)
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 使用选中的素材 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const save = () => {
  emit('success', membershipLevelList.value)
  dialogVisible.value = false
}
/** 重置表单 */
const resetForm = (selectList) => {
  console.log(!selectList)
  if (!selectList) {
    membershipLevelList.value = []
    return
  }
  membershipLevelList.value = selectList
}
</script>
